<template>
	<view class="photo-view">
		<view id="viewer" class="photo-viewer"></view>
		<scroll-view v-if="dataList.length" scroll-x class="image-list">
			<view style="display: inline-block;width: 30upx;"></view>
			<view v-for="(item, index) in dataList" :key="index" @click="onImage(item)" class="image-item"
				:class="{'active': pictureId == item.pictureId}">
				<image v-if="pictureId == item.pictureId" src="/static/vr-active-image.png" class="active-image"></image>
				<image :src="`${IMG_URL}${item.imgUrl}`" class="image-css" mode="aspectFill"></image>
				<view class="title-text">{{item.name}}</view>
			</view>
			<view style="display: inline-block;width: 30upx;"></view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		Viewer
	} from '@photo-sphere-viewer/core';
	import '@photo-sphere-viewer/core/index.css'
	export default {
		data() {
			return {
				detailId: '',
				viewer: null,
				pictureId: '',
				dataList: []
			}
		},
		onLoad(options) {
			this.detailId = options.detailId
			this.getCorporationEnvironmentDetail()
		},
		methods: {
			onImage(item) {
				this.pictureId = item.pictureId
				this.viewer.setPanorama(`${this.IMG_URL}${item.imgUrl}`)
			},
			infoViewer() {
				if (!this.dataList.length) return
				const entity = this.dataList.find(item => item.active)
				if (!entity) return
				this.pictureId = entity.pictureId
				const panorama = this.IMG_URL + entity.imgUrl
				this.viewer = new Viewer({
					container: document.querySelector('#viewer'),
					panorama: panorama
				})
			},
			async getCorporationEnvironmentDetail() {
				uni.$util.showLoading()
				const res = await uni.$api.getCorporationEnvironmentDetail(this.detailId).finally(uni.finally)
				console.log('res----', res);
				const list = res.data.corporationPictureList
				list.forEach((item, index) => item.active = index == 0)
				this.dataList = list || []
				uni.setNavigationBarTitle({
					title: res.data.name
				})
				this.infoViewer()
			}
		}
	}
</script>

<style lang="scss">
	.photo-view {
		width: 100%;
		height: 100vh;
		position: relative;

		.psv-navbar {
			display: none !important;
		}

		.photo-viewer {
			width: 100%;
			height: 100%;
		}

		.image-list {
			width: 100%;
			padding: 22upx 0;
			background: rgba(16, 3, 1, 0.9);
			position: fixed;
			bottom: 150upx;
			left: 0;
			white-space: nowrap;

			.image-item {
				width: 123rpx;
				height: 123rpx;
				border: 2px solid #FFF;
				position: relative;
				display: inline-block;

				.active-image {
					width: 22upx;
					height: 22upx;
					position: absolute;
					top: 5upx;
					right: 5upx;
				}

				.image-css {
					width: 100%;
					height: 100%;
				}

				.title-text {
					width: 100%;
					height: 40rpx;
					background: rgba(13, 2, 1, 0.8);
					@extend .column;
					font-size: 20rpx;
					color: #FFFFFF;
					@extend .text-dot;
					padding: 0 12upx;
					position: absolute;
					left: 0;
					bottom: 0;
				}
			}

			.active {
				border-color: #FFAA20;
			}

			.image-item+.image-item {
				margin-left: 18upx;
			}
		}
	}
</style>